<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
		</style>
	</head>
	<body>
		<canvas id="drawing" width="" height=""></canvas>
		<script>
			var drawing = document.getElementById("drawing"); //获取canvas元素
			drawing.width = '370'; //设置画布大小
			drawing.height = '370';
			if (drawing.getContext) { //获取绘图上下文
				var content = drawing.getContext("2d"),
					radian = 0, //设置初始弧度
					radian_add = Math.PI / 180; //设置弧度增量
				content.beginPath(); //开始绘图
				content.translate(185, 185); //设置绘图原点
				content.moveTo(getX1(radian), getY1(radian)); //移动绘图游标至原点
				content.lineWidth = 10
				// 递归
				recursion() //启动
				function recursion() {
					let numb = randomNum(1, 30)
					setTimeout(() => {
						if (radian <= (Math.PI * 2)) {
							radian += radian_add;
							X = getX1(radian);
							Y = getY1(radian);
							content.strokeStyle = randomHexColor()
							content.lineTo(X, Y);
							content.stroke(); //对路径描边
							content.closePath()
							recursion()
						} else {
							alert('Eating my chicken ba !')
						}
					}, numb)
				}

			}

			function getX(t) { //获取玫瑰线的X坐标
				return 100 * Math.sin(4 * t) * Math.cos(t);
			}

			function getY(t) { //获取玫瑰线的Y坐标
				return 100 * Math.sin(4 * t) * Math.sin(t);
			}

			function getX1(t) { //获取心型线的X坐标
				return 8 * (16 * Math.pow(Math.sin(t), 3))
			}

			function getY1(t) { //获取心型线的Y坐标
				return -8 * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t))
			}

			function randomNum(minNum, maxNum) {
				switch (arguments.length) {
					case 1:
						return parseInt(Math.random() * minNum + 1, 10);
						break;
					case 2:
						return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
						break;
					default:
						return 0;
						break;
				}
			}

			function randomHexColor() { //随机生成十六进制颜色
				var hex = Math.floor(Math.random() * 16777216).toString(16); //生成ffffff以内16进制数
				while (hex.length < 6) { //while循环判断hex位数，少于6位前面加0凑够6位
					hex = '0' + hex;
				}
				return '#' + hex; //返回‘#'开头16进制颜色
			}
		</script>
	</body>
</html>
